<template>
  <a-card class="min-h-[68px] rounded my-[10px]" :body-style="{ padding: '12px 30px', height: '1000px' }"
    :bordered="false" style="width: 100%">
    <!-- 正文头部 -->
    <div slot="title" style="display: flex; justify-content: space-between;">
      <a-space>
        <div class="ty"></div> {{ pageTitle }}{{ $t('user.verification-code.required111566110577275') }}
      </a-space>
      <!-- 头部返回列表功能 -->
      <a-button class="border-none" icon="rollback" @click="rollback">{{ $t('app.setting.themecolor.rr99') }}</a-button>
    </div>
    <!-- 正文头部 -->
    <div slot="title" style="margin: 30px 10px 0px 20px;">
      <div style="display: flex; justify-content: space-between;">
        <a-space>
          <div class="ty"></div>BBA 20th assciate
        </a-space>
        <!-- 查看详情 -->
        <look />
      </div>
      <div style="margin-top: 10px;">
        <a-progress v-bind:width="400" stroke-linecap="square" :percent="99" :steps="3" />
      </div>
    </div>
    <div class="card-left">
      <p class="left-title">{{ $t('user.verification-code.required111566110577276') }}</p>
      <ul style="padding-left: 30px;">
        <li>1.Scenario</li>
        <li>2.Minimization and Necessity Test</li>
        <li>3.Collectiong</li>
        <li>4.Transfer</li>
        <li>5.Using,processing,providing,disclose</li>
        <li>6.Storing & Erasing</li>
        <li>7.Data Subject Right</li>
        <li>8.OutSouring</li>
        <li>9.Sharing</li>
        <li>10.Data Megering</li>
        <li>11.Automated Decision Making</li>
        <li>12.Cross-border Data Transfer</li>
        <li>13.Mobile App</li>
      </ul>
    </div>
    <!-- Rpa范围 -->
    <div style="margin: 20px;">
      <!-- 柱状图 -->
      <div style="display: flex;">
        <div>
          <span class="shu">|</span>
          <span>{{ $t('user.verification-code.required111566110577277') }}</span>
          <div id="main" style="width: 300px;height:300px;"></div>
        </div>
        <div>
          <span class="shu">|</span>
          <span>{{ $t('user.verification-code.required111566110577278') }}</span>
          <div id="maina" style="width: 300px;height:300px;"></div>
        </div>
      </div>
      <!-- 下面表单 -->
      <div style="margin-top: 20px;">
        <span class="shu">|</span>
        <span>{{ $t('user.verification-code.required111566110577279') }}</span>
        <a-table :columns="columns" :data-source="data" :pagination="false" style="margin-top: 10px;">
          <span slot="action">
            {{ $t('user.register.password.popover-message') }}
          </span>
        </a-table>
      </div>
      <a-pagination size="small" :total="50" show-size-changer show-quick-jumper style="margin-left: 200px;" :span="8" />
    </div>
  </a-card>
</template>

<script>

// 引入常用版
const columns = [
  {
    title: '合规要求编号',
    dataIndex: 'key',
    align: 'center',
    width: '100px'

  },
  {
    title: '合规要求名称',
    dataIndex: 'dataKey',
    align: 'center',
    // width: '200px'
  },
  {
    title: '合规要求描述',
    dataIndex: 'purAndNece',
    scopedSlots: { customRender: 'purAndNece' },
    align: 'center',
    // width: '300px'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    width: '70px'
  },
]
const data = [
  {
    key: 1,
    dataKey: '从RPA读取及三小块啊是科技创新那可就',
    purAndNece: '从RPA读取从RPA读取及三小块啊是科技创新那可',
  },
  {
    key: 2,
    dataKey: '从RPA读取从RPA读取及三小块啊是科技创新那可就',
    purAndNece: '从RPA读取从RPA读取及三小块啊是科技创新那可就是',
  },
  {
    key: 3,
    dataKey: '从RPA读取从RPA读取及三小块啊是科技创新那可就是那',
    purAndNece: '从RPA读取从RPA读取及三小块啊是科技创新那可就',
  },

]
export default {
  mounted() {
    // 在通过mounted调用即可
    this.echartsInit()
  },
  components: {
  },
  data() {
    return {
      current: '',
      value: '',
      visible: false,
      columns,
      data,

    }
  },
  methods: {
    rollback() {
      this.$router.go(-1)
    },
    //初始化echarts
    echartsInit() {
      //柱形图
      this.$echarts.init(document.getElementById('main')).setOption({
        series: [
          {
            "name": "运行状态",
            "type": "pie",
            "startAngle": 90,
            "radius": [
              "58%",
              "73%"
            ],
            "center": [
              "50%",
              "50%"
            ],
            "label": {
              "padding": [
                15,
                0,
                0,
                0
              ],
              "color": "#4E5969",
              "fontSize": 14,
              "formatter": "{b|{b}} {d|{c}%}\n",
              "rich": {
                "b": {
                  "fontSize": 14,
                  "color": "#4E5969"
                },
                "d": {
                  "fontSize": 16,
                  "fontWeight": 600,
                  "fontFamily": "DINAlternate-Bold, DINAlternate",
                  "color": "#4E5969"
                }
              }
            },
            "labelLine": {
              "length2": 4
            },
            "data": [
              {
                "name": "时长异常",
                "value": 41.63,
                "itemStyle": {
                  "color": "#FF8542",
                  "borderColor": "#fff",
                  "borderWidth": 2
                }
              },
              {
                "name": "时长正常",
                "value": 51.58,
                "itemStyle": {
                  "color": "#358EFE",
                  "borderColor": "#fff",
                  "borderWidth": 2
                }
              },
              {
                "name": "无时长",
                "value": 6.79,
                "itemStyle": {
                  "color": "#12C2C1",
                  "borderColor": "#fff",
                  "borderWidth": 2
                }
              }
            ]
          }
        ]
      })

      this.$echarts.init(document.getElementById('maina')).setOption({
        series: [
          {
            "name": "运行状态",
            "type": "pie",
            "startAngle": 90,
            "radius": [
              "58%",
              "73%"
            ],
            "center": [
              "50%",
              "50%"
            ],
            "label": {
              "padding": [
                15,
                0,
                0,
                0
              ],
              "color": "#4E5969",
              "fontSize": 14,
              "formatter": "{b|{b}} {d|{c}%}\n",
              "rich": {
                "b": {
                  "fontSize": 14,
                  "color": "#4E5969"
                },
                "d": {
                  "fontSize": 16,
                  "fontWeight": 600,
                  "fontFamily": "DINAlternate-Bold, DINAlternate",
                  "color": "#4E5969"
                }
              }
            },
            "labelLine": {
              "length2": 4
            },
            "data": [
              {
                "name": "时长异常",
                "value": 41.63,
                "itemStyle": {
                  "color": "#FF8542",
                  "borderColor": "#fff",
                  "borderWidth": 2
                }
              },
              {
                "name": "时长正常",
                "value": 51.58,
                "itemStyle": {
                  "color": "#358EFE",
                  "borderColor": "#fff",
                  "borderWidth": 2
                }
              },
              {
                "name": "无时长",
                "value": 6.79,
                "itemStyle": {
                  "color": "#12C2C1",
                  "borderColor": "#fff",
                  "borderWidth": 2
                }
              }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-card-body {
  display: flex;

  .buttomm {
    width: 100%;

  }

  .card-left {
    /*rectangle copy 4备份 87*/
    margin: 20px 30px 20px 20px;
    color: #000;
    left: 339px;
    top: 287px;
    width: 388px;
    height: 428px;
    opacity: 0.5;
    border-radius: 2px;
    background: rgba(213, 229, 255, 1);

    ul li {
      padding: 3px;
    }
  }

  .left-title {
    font-weight: bold;
    color: #000;
    width: 100%;
    line-height: 40px;
    padding: 0 10px;
    opacity: 0.6;
    background: rgb(32, 72, 137);
    border-bottom: 1px solid #DDD;
  }

  .card-right {
    margin: 30px 30px 30px 60px;
  }


  p {
    color: #000;
  }

}

.shu {
  /*矩形备份*/
  margin-right: 5px;
  left: 838px;
  top: 287px;
  width: 6px;
  height: 12px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);

}
</style>